<template>
	<view class="web-tips-wrapper" v-if="false">
		<uni-drawer ref="drawer" mode="bottom" :mask-click="false" :width="750" height="400px">
			<template #top>
				<view class="drawer-top">
					<div class="left" @click="link">全部通知</div>
					<div class="title">行程提醒</div>
					<image @click="closeFn" class="icon" src="https://static.inclusionconf.com/static/images/inner-tips-close.png" mode="widthFix"></image>
				</view>
			</template>
			<web-tips-list inner ref="tipsList"></web-tips-list>
		</uni-drawer>
		<view class="web-tips-icon" @click="openFn" @touchstart="touchstart" @touchend="touchend" @touchmove="touchmove" :style="{ transform: `translate(${ left }px, ${ top }px)` }">
			<image class="icon" src="https://static.inclusionconf.com/static/images/chat/xinfeng.png" mode="" mode="widthFix"></image>
			<div class="tips" v-if="num">{{ num }}</div>
		</view>
	</view>
</template>

<script>
	import protal from '@/api/protal'
	export default {
		data() {
			return {
				num: 0,
				oldLeft: 0,
				oldTop: 0,
				left: 0,
				top: 0
			}
		},
		created() {
			this.getData()
			clearInterval(this.timer)
			this.timer = setInterval(() => {
				this.getData()
			}, 5000)
		},
		beforeDestroy() {
			clearInterval(this.timer)
		},
		methods: {
			clearThisInterval() {
				clearInterval(this.timer)
			},
			touchstart(e) {
				this.oldLeft = e.changedTouches[0].pageX - this.left
				this.oldTop = e.changedTouches[0].pageY - this.top
			},
			touchend(e) {
			},
			touchmove(e) {
				this.left = e.changedTouches[0].pageX - this.oldLeft
				this.top = e.changedTouches[0].pageY - this.oldTop
			},
			openFn() {
				this.$refs.drawer.open()
			},
			closeFn() {
				this.$refs.drawer.close()
			},
			getData() {
				if (uni.getStorageSync('token')) {
					protal.myUnReadCount().then(res => {
						this.num = res.data
					})
				}
			},
			link() {
				uni.navigateTo({
					url: '/pages/innerTips/index'
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.web-tips-wrapper {

		.drawer-top {
			height: 57px;
			border-bottom: 1px solid #E0E0E0;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;

			.left {
				position: absolute;
				left: 14px;
				top: 20px;
				font-family: AlibabaPuHuiTi_3_55_Regular;
				font-size: 15px;
				color: #3C2DAA;
				line-height: 18px;
				text-align: left;
				font-style: normal;
			}

			.title {
				font-family: AlibabaPuHuiTi_2_85_Bold;
				font-size: 18px;
				color: #000000;
				line-height: 18px;
				text-align: left;
				font-style: normal;
			}

			.icon {
				position: absolute;
				right: 16px;
				top: 14px;
				width: 30px;
			}
		}
	}

	.web-tips-icon {
		position: fixed;
		right: 0;
		bottom: 200rpx;
		z-index: 2;
		width: 84px;

		.icon {
			width: 100%;
		}

		.tips {
			position: absolute;
			right: 20px;
			top: 20px;
			min-width: 16px;
			height: 16px;
			border-radius: 8px;
			padding: 0 2px;
			box-sizing: border-box;
			background: #FF0000;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: Inter, Inter;
			font-weight: 500;
			font-size: 12px;
			color: #FFFFFF;
			line-height: 12px;
			text-align: left;
			font-style: normal;
		}
	}
</style>